<template>
	<div class="home">
		<div class="con">
			<div class="toptitle">{{  title }}</div>

			<div class="context">
				<div class="leftcon"></div>
				<div class="rightcon">
					<div class="title">欢迎登录</div>
					<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="form">
						<div class="list">
							<div class="tu">
								<img src="@/assets/login/user.png" alt />
							</div>
							<div class="ipt">
								<input type="text" placeholder="用户名" v-model="loginForm.username" />
							</div>
						</div>
						<div class="list">
							<div class="tu">
								<img src="@/assets/login/password.png" alt />
							</div>
							<div class="ipt">
								<input
									type="password"
									placeholder="密码"
									v-model="loginForm.password"
									@keyup.enter="handleLogin"
								/>
							</div>
						</div>
						<div class="list list1" v-if="captchaEnabled">
							<div class="tu">
								<img src="@/assets/login/yanzhengma.png" alt />
							</div>
							<div class="ipt">
								<input type="text" placeholder="验证码" v-model="loginForm.code" @keyup.enter="handleLogin" />
							</div>
							<div class="ma">
								<img :src="codeUrl" @click="getCode" class="login-code-img" />
							</div>
						</div>
					</el-form>
					<div class="status">
						<label for="sex1">
							<input type="checkbox" id="sex1" name="sex" value="0" v-model="loginForm.rememberMe" />
							<span>保持会话</span>
						</label>
						<div v-if="register">
							<router-link class="link-type" :to="'/register'">立即注册</router-link>
						</div>
					</div>
					<el-button
						:loading="loading"
						size="medium"
						type="primary"
						style="width:100%;"
						@click.prevent="handleLogin"
					>
						<span v-if="!loading">登 录</span>
						<span v-else>登 录 中...</span>
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
	name: "Login",
	data () {
		return {
			codeUrl: "",
			loginForm: {
				username: "",
				password: "",
				rememberMe: false,
				code: "",
				uuid: ""
			},
			title: process.env.VUE_APP_TITLE,
			loginRules: {
				username: [
					{ required: true, trigger: "blur", message: "请输入您的账号" }
				],
				password: [
					{ required: true, trigger: "blur", message: "请输入您的密码" }
				],
				code: [{ required: true, trigger: "change", message: "请输入验证码" }]
			},
			loading: false,
			// 验证码开关
			captchaEnabled: true,
			// 注册开关
			register: false,
			redirect: undefined
		};
	},
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true
		}
	},
	created () {
		this.getCode();
		this.getCookie();
	},
	methods: {
		// 获取验证码图片
		getCode () {
			getCodeImg().then(res => {
				this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
				if (this.captchaEnabled) {
					this.codeUrl = "data:image/gif;base64," + res.img;
					this.loginForm.uuid = res.uuid;
				}
			});
		},
		// 获取cookie
		getCookie () {
			const username = Cookies.get("username");
			const password = Cookies.get("password");
			const rememberMe = Cookies.get('rememberMe')
			this.loginForm = {
				username: username === undefined ? this.loginForm.username : username,
				password: password === undefined ? this.loginForm.password : decrypt(password),
				rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
			};
		},
		// 登录
		handleLogin () {
			console.log('login', this.loginForm)
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.loading = true;
					if (this.loginForm.rememberMe) {
						Cookies.set("username", this.loginForm.username, { expires: 30 });
						Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
						Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
					} else {
						Cookies.remove("username");
						Cookies.remove("password");
						Cookies.remove('rememberMe');
					}
					this.$store.dispatch("Login", this.loginForm).then(() => {
						this.$router.push({ path: this.redirect || "/" }).catch(() => { });
					}).catch(() => {
						this.loading = false;
						if (this.captchaEnabled) {
							this.getCode();
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.home {
	width: 100%;
	height: 100%;
	background-color: rgb(29, 129, 235);
	.con {
		width: 1200px;
		margin: 0 auto;
		position: relative;
		height: 100%;
	}
	.toptitle {
		padding-top: 40px;
		font-size: 24px;
		color: #ffffff;
	}
	.context {
		width: 100%;
		min-height: 50%;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
		// background-color: aqua;
		display: flex;
		justify-content: space-between;
		.leftcon {
			background-image: url('../assets/login/loginPic.png');
			width: 50%;
			// height: 100%;
			background-size: 100%;
			background-position: center;
			background-repeat: no-repeat;
		}
		.rightcon {
			width: 40%;
			background-color: #fff;
			border-radius: 30px;
			padding: 55px 35px 62px;
			box-shadow: 0 0 20px -10px;
			box-sizing: border-box;
			.title {
				color: #1a1a1a;
				font-size: 28px;
				font-weight: bold;
				position: relative;
			}
			.title::after {
				content: '';
				width: 60px;
				height: 4px;
				background-color: rgb(29, 111, 235);
				position: absolute;
				left: 0;
				bottom: -5px;
			}

			.form {
				width: 100%;
				margin-top: 30px;
				.list {
					display: flex;
					justify-content: space-between;
					height: 50px;
					margin-bottom: 20px;
					.tu {
						width: 45px;
						height: 100%;
						border: 1px solid rgb(187, 187, 187);
						position: relative;
						box-sizing: border-box;
						img {
							width: 14px;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}
					.ipt {
						width: calc(100% - 45px);
						height: 100%;
						border: 1px solid rgb(187, 187, 187);
						border-left: 0px;
						box-sizing: border-box;
						input {
							width: 99%;
							height: 96%;
							border: none;
							outline: none;
							padding-left: 10px;
							box-sizing: border-box;
						}
					}
				}
				.list1 {
					.ipt {
						width: calc(100% - 195px);
					}
					.ma {
						width: 150px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.status {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20px 0;
				span {
					color: #666;
					margin-left: 8px;
					margin-top: -3px;
				}
			}
			.submit {
				width: 100%;
				height: 45px;
				line-height: 45px;
				text-align: center;
				margin-top: 20px;
				background-color: #708eea;
				border-radius: 8px;
				cursor: pointer;
				color: #ffffff;
			}
		}
	}
}
</style>
